html {
    background: #fafbfe;
    font-family: 'Open Sans', sans-serif;
    height: 100%;
}

body {
    background: #fafbfe !important;
    -moz-transform: scale(0.90, 0.90);
    zoom: 0.90;
    zoom: 90%;
    height: 100%;
}

.login-container {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 275px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    align-items: center;
    justify-content: center;
}

.login-vc-img {
    margin-bottom: 40px;
    width: 100%;
}

.login-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px !important;
}

.copyright {
    font-size: 12px;
    color: #979ea8;
}

.login-control {
    height: 50px;
    border: none;
    border-radius: 12px 12px 0px 0px;
    margin-bottom: 0px;
    width: 175px;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 700;
    border-bottom:1px solid #f5f3f7;
}

#username {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border: 1px solid #eff1f6 !important;
}

#pwd {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    margin-top: -1px !important;
    margin-bottom: 24px !important;
    border: 1px solid #eff1f6 !important;
}

.login-btn {
    height: 50px;
    margin-bottom: 0px;
    font-size: 17px;
    font-weight:500;
    width: 201px;
    border-radius: 0px 0px 12px 12px;
    border: 2px solid white;
    background-color: #5353d7;
    color: white;
}

.container-fluid {
    background: #fafbfe;
    height:100% !important;
}

.container-fluid > .row {
    flex-wrap: nowrap;
    height: 100% !important;
}

.left-nav {
    height: 100%;
    width: 240px !important;
    padding: 0px 18px !important;
}

.flex-column {
    height: calc(100vh - 12px);
}

.left-nav-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 124px;
}

.nav-item {
    line-height: 1;
    list-style: none;
    margin-top: 2px;
    padding: 0;
    text-decoration: none;
}

.nav-item > a {
    font-size: 16px;
    color: #979ea8;
    padding: 10px 16px;
    margin-top: 2px;
    border-radius: 8px;
}

.nav-item > a:hover, .active {
    background: #eff1f6;
    color: #4c535d !important;
}

.user-nav-item {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

.user-button {
    background: none !important;
    border: none !important;
    padding: 0px !important;
}

.user-block {
    outline: 1px solid #dfe3e8;
    border-radius: 12px;
    padding: 8px 8px 8px 12px;
    --bs-gutter-x: 0 !important;
    background: #fafbfe !important;
    /* box-shadow: 1px 1px 10px rgb(223 227 232 / 60%) !important; */
}

.user-block > div > p {
    margin-bottom: 0;
    text-align: left;
}

.user-block-initials {
    width: auto !important;
    display: flex;
    align-items: center;
    margin-right: 10px;
}

[data-letters]:before {
    content: attr(data-letters);
    display: inline-block;
    font-size: 14px;
    width: 34px;
    height:34px;
    line-height:34px;
    text-align:center;
    border-radius:50%;
    background:#eff1f6;
    vertical-align:middle;
    color:black;
}

.user-name {
    font-size: 15px;
    color: black;
    font-weight: 500;
}

.user-block-info {
    display: flex !important;
    align-items: center !important;
}

.user-title {
    color: #979ea8;
    font-size: 13px;
    margin-top: -4px;
}

.dropdown-menu {
    border-radius: 6px !important;
}

.user-nav-item > .dropdown-menu {
    border: 1px solid #eff1ef !important;
    border-radius: 8px !important;
    padding: 8px !important;
}

.user-nav-item > .dropdown-menu > .dropdown-divider {
    border-top: 1px solid #eff1ef !important;
}

#main {
    background: none !important;
    border-radius: 12px;
    margin: 12px 12px 12px 0px;
    height: calc(100% - 24px);
    padding: 0 !important;
}

.navbar-toggler {
    background: red !important;
}

.main-title {
    line-height: 70px;
    font-size: 24px;
    padding-left: 24px;
    padding-top: 4px;
}

/* DataTables */
.dataTables_filter {
    float: left !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
}

.dataTables_filter > label > input {
    border-radius: 8px !important;
    font-size: 15px !important;
    padding-left: 10px !important;
    padding-top: 4px !important;
    height: 40px !important;
    border-color: #f2f3f5 !important;
}

.dt-buttons {
    margin-right: 20px;
}

.toolbar .btn-group > button {
    border-radius: 8px;
    font-size: 15px;
    height: 40px;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.btn-filter {
    border: 1px solid #eff1f6 !important;
    background: white !important;
    color: gray !important;
}

.btn-create-order, .btnChangePin {
    font-size: 15px !important;
    border-radius: 8px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    height: 40px !important;
}

.btnChangePin {
    background-color: #0d6efd !important;
    color: white !important;
    border-radius: 12px !important;
}

.btnSubmitOrder {
    font-size: 15px !important;
    border-radius: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
}

#createOrderCancel {
    border-radius: 12px !important;
}

#tblData, #tblData2, #tblData3, #tblData4, #tblInitiated {
    font-size: 14px;
    border-color: #eff1f6;
    color: black;
}

#tblData_wrapper, #tblData2_wrapper, #tblData3_wrapper, #tblData4_wrapper {
    background: white !important;
    padding: 24px 0px 20px 0px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
    border: 1px solid #dfe3e8 !important;
    box-shadow: 1px 1px 10px rgb(223 227 232 / 60%) !important;
}

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background-image: none !important;
}

table.dataTable thead .sorting_asc:after { 
    display: none;
    background-image: none !important;
}

table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid #eff1f6 !important;
    font-weight: 600 !important;
}

.td-order-number {
    font-weight: 600;
    color: black !important;
    padding-left: 24px !important;
}

table.dataTable tbody td, table2.dataTable tbody td {
    color: #757b84;
    padding: 8px 10px 6px;
    cursor: pointer !important;
}

/* Create order modal */
.modal-dialog {
    max-width: 850px !important;
}

#createOrderModal > .modal-dialog > .modal-content, #orderDetailModal > .modal-dialog > .modal-content, #processSheetModal > .modal-dialog > .modal-content, #changePinModal > .modal-dialog > .modal-content {
    border-radius: 16px;
    background: #fafbfe;
    padding: 12px;
}

.modal-body .row {
    margin-bottom: 24px;
}

.modal-title {
    font-size: 24px;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

.btn-close {
    margin-right: 8px;
}

.form-control, .form-select {
    border-radius: 8px !important;
}

#salesRepEmail, #dealer, #dealerEmail, #quotedLeadTime {
    background: none !important;
    border: 1px solid #eff1f6 !important;
}

.btn-cancel-modal {
    font-size: 15px !important;
    border-radius: 8px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    height: 40px !important;
    background: #eff1f6 !important;
    color: #979ea8 !important;
    border: none !important;
}

.modal-btn-row {
    margin-bottom: 0px !important;
}

.modal-btn-row div button {
    width: 100% !important;
    height: 54px !important;
}

/* Order details modal */
.modal-title-row {
    display: flex !important;
    align-items: center;
}

#orderDetailModal .modal-title {
    margin-bottom: 0px !important;
}

/* .btn-order-details-save {
    font-size: 14px !important;
    border-radius: 12px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    height: 40px !important;
    float: right !important;
    width: 100px !important;
} */

#orderDetailModal > .modal-dialog {
    max-width: 1200px !important;
}

#tab-nav-row {
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px !important;
}

.nav-link {
    color: #979ea8 !important;
}

.nav-pills .nav-link {
    border-radius: 10px !important;
    height: 40px !important;
    margin-right: 4px !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: #eff1f6 !important;
    color: black !important;
}

.tab-content {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.tab-pane {
    background: none !important;
}

.detail-container, .detail-container2 {
    background: white !important;
    margin-bottom: 24px !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    border: 1px solid #eff1f6 !important;
}

.detail-container label, .detail-container2 label {
    font-weight: 600;
}

.detail-container input, .detail-container2 input {
    color: #979ea8 !important;
    border: none !important;
    padding-left: 4px !important;
}

.detail-container select, .detail-container2 select {
    height: 24.49px !important;
}

.detail-container2 > .row {
    display: flex !important;
    align-items: center !important;
}

.detail-container2 input {
    color: #979ea8 !important;
}

.detail-container .row, .detail-container2 .row {
    margin-bottom: 0px !important;
}

.detail-court-top {
    margin-bottom: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.detail-court-bottom {
    border-top-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
    margin-top: -1px !important;
}

.detail-select {
    border: none !important;
    padding-left: 10px !important;
    color: #979ea8;
}


/* QR code */
.qr-container {
    border: 1px solid #eff1f6;
    background: white;
    border-radius: 24px;
    display: flex;
    justify-content: center;
    width: 440px !important;
    margin: auto !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    margin-top: 40px !important;
    margin-bottom: 80px !important;
}

.qr-sub-container {
    width:200px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#orderNumberForQR {
    width: 180px !important;
    border: none !important;
    font-size: 24px !important;
    font-weight: 600;
    padding: 0px !important;
}

#divForQrCode {
    width: 200px !important;
    padding-left: 0px !important;
}

#orderStatusQR {
    display: inline;
    background: red;
    padding: 4px 12px !important;
    color: white;
    border-radius: 12px;
}

#div-packet-complete-message {
    display: flex;
    align-items: center;
    justify-content: center;
}

#div-packet-complete-message > p {
    margin-bottom: 0px !important;
}

.qr-buttons {
    width: 440px !important;
    margin: auto !important;
}

.btn-qr-print {
    height: 52px !important;
    width: 100% !important;
    border-radius: 12px !important;
    margin: auto !important;
    margin-bottom: 0px !important;
    color: black !important;
}

.btn-packet-complete {
    height: 52px !important;
    width: 100% !important;
    border-radius: 12px !important;
    margin: auto !important;
    margin-bottom: 0px !important;
}

/* Shipping */
.detail-container-title {
    font-size: 14px !important;
    margin-bottom: 4px !important;
    color: #979ea8 !important;
    padding-left: 16px !important;
}

.add-pallet-input {
    border: 1px solid #eff1f6 !important;
    border-radius: 8px !important;
    height: 40px !important;
}

.ds-title {
    margin: 0px !important;
}

#tblDropship, #tblDocuments {
    font-size: 15px !important;
    background: white !important;
    margin-bottom: 10px !important;
}

#tblDropship tbody tr td, #tblDocuments tbody tr td {
    color: #979ea8 !important;
    padding: 2px 2px !important;
}

#tblDropship thead tr th, #tblDocuments thead tr th {
    padding: 2px 2px !important;
}

.btn-add-ds {
    border: none !important;
    text-align: center;
    font-size: 15px !important;
    padding-left: 4px !important;
    background: #0d6efd !important;
    color: white !important;
    border-radius: 8px !important;
    width: 15% !important;
    height: 36px !important;
    margin-bottom: 10px !important;
}

.remove-ds {
    background: none !important;
    border: none !important;
    color: red !important;
    font-size: 14px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/* In-cell buttons */
.cell-button-view-order {
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 2px 14px;
}

.cell-button-qr {
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 24px;
    padding: 2px 14px;
}

.cell-button-doc-delete {
    background: none;
    color: red;
    border: none;
    font-size: 14px;
}

#tblInitiated tbody tr td:last-child {
    padding: 6px !important;
}

/* Breadcrups CSS */
.tracker-start {
    min-width: 100px !important;
    margin-left: 0px !important;
    padding-right: 0px !important;
    padding-left: 8px !important;
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

.tracker-end {
    min-width: 125px !important;
    margin-left: 2px !important;
    margin-right: 0px !important;
    padding-left: 30px !important;
    padding-right: 20px !important;
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

.tracker-end::after {
    content: none !important;
}

.arrow-steps .step {
	font-size: 15px;
	text-align: center;
	color: #666;
	cursor: default;
	margin: 0 2px;
	padding: 10px 10px 10px 30px;
	min-width: 126px;
	float: left;
	position: relative;
	background-color: #eff1f687;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
    transition: background-color 0.2s ease;
}

.arrow-steps .step:after,
.arrow-steps .step:before {
	content: " ";
	position: absolute;
	top: 0;
	right: -17px;
	width: 0;
	height: 0;
	border-top: 22px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 17px solid #eff1f687;	
	z-index: 2;
    transition: border-color 0.2s ease;
}

.arrow-steps .step:before {
	right: auto;
	left: 0;
	border-left: 17px solid #fff;	
	z-index: 0;
}

.arrow-steps .step:first-child:before {
	border: none;
}

.arrow-steps .step:first-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.arrow-steps .step span {
	position: relative;
}

.arrow-steps .step span:before {
	opacity: 0;
	content: "✔";
	position: absolute;
	top: -2px;
	left: -20px;
}

.arrow-steps .step.done span:before {
	opacity: 1;
	-webkit-transition: opacity 0.3s ease 0.5s;
	-moz-transition: opacity 0.3s ease 0.5s;
	-ms-transition: opacity 0.3s ease 0.5s;
	transition: opacity 0.3s ease 0.5s;
}

.arrow-steps .step.current {
	color: #fff;
	background-color: #475ea9;
}
.arrow-steps .step.current:after {
	border-left: 17px solid #475ea9;	
}
.arrow-steps .step.complete {
	color: black;
	background-color: #00ffbd;
}
.arrow-steps .step.complete:after {
	border-left: 17px solid #00ffbd;	
}

/* Print QR code */
@page {
    size: landscape;
    height: auto;
}

@media print {
    body * {
        visibility: hidden;
    }

    html, body {
        height:75vh; 
        margin: 0 !important; 
        padding: 0 !important;
        overflow: hidden;
      }

    .qr-container {
        z-index: 1 !important;
        border: none !important;
        margin: 0px !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }      

    .qr-container, .qr-container * {
        visibility: visible !important;
        -webkit-print-color-adjust: exact !important;
    }
}

/* Other */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.modal::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.modal {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.remove-pallet {
    width: 20px !important;
    background: none !important;
    border: none !important;
    color: red !important;
    font-size: 15px !important;
}

.remove-dropship {
    width: 100% !important;
    background: none !important;
    border: none !important;
    color: red !important;
    font-size: 15px !important;
    text-align: center !important;
}

.remove-file {
    width: 100% !important;
    background: none !important;
    border: none !important;
    color: red !important;
    font-size: 15px !important;
    text-align: center !important;
}

.datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active:active {
    color: white !important;
    background: #0d6efd !important;
}


.individual-pallets {
    margin-top: 12px;
}

.individual-pallets:empty {
    margin-top: 0px !important;
}

.nav-link {
    transition: none !important;
}

/* .modal:nth-of-type(odd) {
    z-index: 1062 !important;
}

.modal-backdrop.show:nth-of-type(odd) {
    z-index: 1061 !important;
} */

.modal-backdrop {
    width: 100% !important;
    height: 100% !important;
}

/* .modal:nth-child(n) {
    z-index: 1062 !important;
}

.modal-backdrop.show:nth-child(n) {
    z-index: 1061 !important;
} */

#dropshipModal .modal-dialog {
    margin-top: 140px !important;
}

table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:after {
    top: 50%;
    display: none !important;
}

table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:before {
    bottom: 50%;
    display: none !important;
}

#tblDocuments {
    background: white !important;
    border-radius: 16px !important;
    font-size: 15px;
}

#tblDocuments {
    border-color: #eff1f6;
}

#tblDocuments tbody tr:last-child td {
    border-bottom: none !important;
}

table.dataTable.no-footer {
    border-bottom: none;
}

table.dataTable.hover>tbody>tr:hover>*, table.dataTable.display>tbody>tr:hover>* {
    background: #fafbfe;
}

input:disabled {
    background-color: white;
}

.mobile-body {
    /* background: rgba(0,0,0,0.6) !important; */
    background: white !important;
}

.mobile-container {
    padding: 0px !important;
    height: 100% !important;
}

.mobile-logo-link {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    justify-content: center;
}

.mobile-logo {
    width: 90% !important;
    height: auto !important;
    margin-top: 30px !important;
    margin-bottom: 4px !important;
}

.mobile-cad {
    width: 90% !important;
    height: auto !important;
    margin-bottom: 40px !important;
}

.mobile-slide-up {
    background: #fafbfe;
    padding-left: 36px !important;
    padding-right: 36px !important;
    height: calc(100%) !important;
    /* position: absolute !important;
    top: 25% !important; */
    width: 100% !important;
    /* border-top-left-radius: 30px;
    border-top-right-radius: 30px; */
}

.mobile-row {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

#mobile-order-num {
    text-align: center;
    font-size: 50px;
    font-weight: 600;
    margin-bottom: 20px !important;
}

.mobile-paragraph-sub {
    color: #ced4db !important;
    text-align: center;
    margin-bottom: 0px;
}

.btn-mobile-scan {
    background: #216efd !important;
    color: white;
    border-radius: 16px !important;
    height: 60px !important;
    margin-bottom: 4px !important;
}

.btn-mobile-image {
    background: none !important;
    border: none !important;
    color: #0d6efd !important;
    height: 60px !important;
    margin-bottom: 40px !important;
}

.btn-mobile-other {
    background: none !important;
    border: none !important;
    color: #ced4db !important;
    height: 60px !important;
}

.new-scan-text {
    text-align: center;
    font-size: 16px !important;
}

.scan-state-dropup {
    position: absolute !important;
    bottom: 0;
    width: 100%;
}

#btn-order-detail-save {
    height: 44px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    width: 100% !important;
}

/* .color-input {
    border-radius: 12px!important;
    text-align: center;
    margin-bottom: 2px !important;
} */

/* #od-black {
    background: #242424 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-bright-red {
    background: #f33b48 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-burgundy {
    background: #893d33 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-emerald {
    background: #007a53 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-graphite {
    background: #57534e !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-light-blue {
    background: #96bcea !important;
    color: black !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-navy-blue {
    background: #6083b5 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-olive-green {
    background: #74885e !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-orange {
    background: #fe8036 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-purple {
    background: #855e95 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-royal-blue {
    background: #3083c2 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-rust-red {
    background: #c27f63 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-sand {
    background: #d8b69d !important;
    color: black !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-slate-green {
    background: #516556 !important;
    color: white !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-titanium {
    background: #b5c2c9 !important;
    color: black !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-white {
    background: #fafafa !important;
    color: black !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
}

#od-yellow {
    background: #fdbb3c !important;
    color: black !important;  
    padding-left: 0px !important;
    padding-right: 0px !important;
} */

#tblDropship tbody tr td, #tblDocuments tbody tr td {
    padding: 2px 8px 2px 0px !important;
}

#tblDropship td, #tblDocuments td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-wrapping {
    height: 44px !important;
    width: 100% !important;
    border-radius: 12px !important;
}

input[type="text"]:disabled{
    background-color: white !important;
}

.dataTables_info {
    margin-left: 24px !important;
    font-size: 14px !important;
}

.pill-cell {
    padding: 8px 4px !important;
}

.pill-to-location-packing {
    background: #f8df72 !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-to-location-pending {
    background: transparent !important;
    /* color: #242424 !important; */
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-priority-rush {
    background: red !important;
    color: white !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-priority-normal {
    background: #dedeff !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-pre-pack {
    background: #f8df72 !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-pack-normal {
    background: transparent !important;
    /* color: #242424 !important; */
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-ship-coord-success {
    background: #84f028 !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-ship-coord {
    background: #f8df72 !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-ship-normal {
    background: lawngreen !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-ship-none {
    background: none !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-payment-paid-in-full {
    background: #f2f3f5 !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-payment-deposit-paid {
    background: #f8df72 !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.pill-payment-net-30 {
    background: #97fea3 !important;
    color: #242424 !important;
    padding: 2px 12px !important;
    border-radius: 30px !important;
    width: fit-content !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0px !important;
    margin-left: 0px !important;
}

.page-item.active .page-link {
    z-index: 3 !important;
    color: #242424 !important;
    background-color: #eff1f6 !important;
    border-color: #eff1f6 !important;
}

select:disabled {
    appearance:  none !important;
    padding-left: 4px !important;
}

#addImageModal, #addErrorModal {
    background: #fafbfe !important;
    border-radius: 24px !important;
}

#addImageModal form .modal-header, #addErrorModal form .modal-header {
    padding: 2rem !important;
    border-bottom: none !important;
}

#addImageModal form .modal-body, #addErrorModal form .modal-body {
    padding: 0rem 2rem !important;
}

#addImageModal form .modal-footer, #addErrorModal form .modal-footer {
    padding: 2rem !important;
    border-top: none !important
}

#btnAddFileCancel {
    height: 60px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    background: #eff1f6 !important;
    color: #242424 !important;
}

#btnAddFileSubmit {
    height: 60px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    background: #216efd !important;
    color: white !important;
}

#orderFile {
    font-size: 1rem !important;
    height: 58px !important;
    line-height: 2.6 !important;
}

#btnLogErrorCancel {
    height: 60px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    background: #eff1f6 !important;
    color: #242424 !important;
}

#addErrorButton {
    height: 60px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    background: #216efd !important;
    color: white !important;
}

.order-label {
    display: flex;
    align-items: center;
    font-size: 18px;
}

.btn-check-label {
    border-radius: 30px !important;
    margin-right: 8px !important;
    margin-bottom: 8px !important;
    padding: 0px 16px !important;
    line-height: 1.8 !important;
    background-color: #eff1f6 !important;
    color: #989ea8 !important;
    border: none !important;
    box-shadow: none !important;
}

.btn-check-label:hover {
    background-color: #f8df72 !important;
    color: #242424 !important;
    border: none !important;
}

.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus, .btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
    background-color: #f8df72 !important;
    color: #242424 !important;
    box-shadow: none !important;
}

#createOrderModal input, #createOrderModal select {
    padding: 4px 14px !important;
    color: #979ea8 !important;
    border: none !important;
    /* border: 1px solid #eff1f6 !important; */
}

#createOrderModal input:hover, #createOrderModal select:hover, #createOrderModal input:focus, #createOrderModal select:focus {
    background-color: #eff1f6 !important;
}

#createOrderModal .modal-content {
    padding: 24px !important;
    border-radius: 30px !important;
    background: white !important;
}

hr {
    background-color: #eff1f6 !important;
    opacity: 1 !important;
}

#btn-complete-pre-pack {
    background-color: #ffc107 !important;
    border-radius: 8px !important;
    height: 50px !important;
    border: none !important;
    padding: 2px 24px !important;
    color: #242424 !important;
}

#btn-packing-submit {
    background-color: #ffc107 !important;
    border-radius: 8px !important;
    height: 50px !important;
    border: none !important;
    padding: 2px 24px !important;
    color: #242424 !important;
}

.unschedule button {
    color: #ced4db !important;
    background: none !important;
    border: none !important;
    padding-left: 0px !important;
}

.mark-as-ship-today button {
    color: #58A3F9 !important;
    background: none !important;
    border: none !important;
    padding-left: 0px !important;
}

.ship-coord-highlight {
    background-color: red !important;
}

#btn-customer-portal-link{
    border-radius: 12px !important;
    margin-right: 16px !important;
    background: #eff1f6 !important;
    color: #242424 !important;
    border: none !important;
    text-decoration: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ps-doc-btn {
    height: 54px;
    border-radius: 8px;
    border: 1px solid #0d6efd;
    background: none;
    color: #0D6EFE;
    margin-bottom: 12px !important;
    text-decoration: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Measure container */

.measure-container {
    background-color: white;
    border: 1px solid #DFE3E8;
    border-radius: 10px;
    padding-bottom: 4px;
    margin-bottom: 16px;
}

.measure-table thead tr th {
    padding-top: 20px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
    font-weight: 600;
}

.measure-table thead tr th:first-child {
    padding-left: 24px;
    font-size: 15px;
    text-align: left;
}

.measure-table thead tr th:last-child {
    padding-right: 24px;
}

.measure-table tbody tr th {
    padding-left: 24px !important;
    text-align: left !important;
}

.measure-table tbody tr th, .measure-table tbody tr td {
    font-size: 14px;
    font-weight: 400;
    padding: 3px 4px;
    text-align: right;
    white-space: nowrap;
}

.measure-table tbody tr td:last-child {
    padding-right: 24px;
}

.measure-table tbody tr:hover {
    cursor: pointer;
}

/* Measure chart container */

.measure-chart-container {
    background: black;
    border-radius: 10px;
    height: 100%;
}

#chartdiv {
    height: 100%;
}

.negative-value {
    color: red;
}

.measure-table-header-label {
    padding: 0 !important;
    margin: 24px 24px 0px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.measure-table-main-kpi {
    padding: 0 !important;
    margin-left: 24px !important;
    margin-bottom: 0px !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

.measure-table-header-label {
    font-size: 15px;
    font-weight: 600;
}

.measure-section-break {
    border-bottom: 1px solid #eff1f6;
}